<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>FREAK</title>
    
    <meta name="description" content="Web开发项目" />
    <meta name="author" content="Xiong X." />

	<link rel="shortcut icon" href="img/favicon.png" />
    <link rel="apple-touch-icon" href="img/favicon.png" />
	
    <link href="css/fonts.css" rel="stylesheet" />
    <link href="css/index/impress.css" rel="stylesheet" />
	<link href="css/bootstrap.min.css" rel="stylesheet" />  
	<link href="css/bootstrap-responsive.min.css" rel="stylesheet" />  
	
	<script src="js/jquery-3.2.1.min.js"></script> 
	<script src="js/bootstrap.min.js"></script>  
	<script src="js/index/index.js"></script> 
</head>

<body class="impress-not-supported">
<div class="fallback-message">
    <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
    <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>
	
<div id="impress">

    <div id="freak" class="step" data-x="0" data-y="0" data-z="0">
		<img src="img/favicon_2.png" style="opacity=0.1"/>
        <p style="font-size:1.2em; font-family:Microsoft YaHei">Freak - 创造您的在线演示体验</p><br/>
		<h3>Web开发项目</h3>
		<h2>@<a href="http://xxiong.me">熊熊</a>&nbsp;&nbsp;<a href="#">王李闽</a>&nbsp;&nbsp;<a href="#">杨艳利</a></h2>
    </div>

    <div id="freak1" class="step slide" data-x="0" data-y="1000" data-z="0">	
        <q><img src="img/index/geogif/1.gif" style="width:250px"/>你是否 <strong style="color:rgb(255,255,255)">厌倦了</strong><br/><q style="text-align:center">幻灯片的展示形式？</q></q>
    </div>

	<div id="freak2" class="step slide" data-x="1200" data-y="1000" data-z="0">	
        <q><img src="img/index/geogif/2.gif" style="width:250px"/>你不认为<br/><p style="text-align:center">现代演示文稿<strong style="color:rgb(255,255,255)"> 不应该受到</strong></p><br/><p style="text-align:center">“经典”幻灯片面板的限制吗？</p></q>
    </div>
	
	<div id="freak3" class="step slide" data-x="2400" data-y="1000" data-z="0">	
        <q><img src="img/index/geogif/3.gif" style="width:250px"/>你想让你的听众<br/><q style="text-align:center">对你的演讲<strong style="color:rgb(255,255,255)"> 印象深刻 </strong>吗？</q></q>
    </div>
	
	<div id="freak4" class="step slide" data-x="3600" data-y="1000" data-z="0">	
        <q><img src="img/index/geogif/4.gif" style="width:250px"/>你还在担心<br/><q style="text-align:center">U盘拷贝导致<strong style="color:rgb(255,255,255)"> 感染病毒 </strong>吗？</q></q>
    </div>

    <div id="freak5" class="step noslide" data-x="3600" data-y="3000" data-z="0" data-rotate="90" data-scale="2">
        <span class="try">那么你应该试一试</span>
        <h1>Freak</h1>
        <span class="footnote">也许会带给你惊喜</span>
    </div>
	
	<div id="freak6" class="step noslide" data-x="-1500" data-y="5000" data-z="0" data-rotate-x="90" data-rotate="270" data-scale="4">
		<p>传播<br/><br/><b>宏大</b><br/><span class="thoughts">的思想</span></p>
    </div>
	
	<div id="freak7" class="step noslide" data-x="-1500" data-y="6000" data-z="0" data-rotate-x="90" data-rotate="270">
		<p>亦或者 <b><i> 悦动 </i></b> 的灵感</p>
    </div>
	
	<div id="freak8" class="step noslide" data-x="1800" data-y="-1000" data-z="0" data-rotate-x="40" data-scale="2">
		<img src="img/index/paper.png" style="width:500px"/>
        <span>思想的高度</span>
    </div>
	
	<div id="freak9" class="step noslide" data-x="4000" data-y="-1000" data-z="-1000">
		<img class="imgbox" src="img/index/code.png" style="width:500px"/><br/><br/>
		<span>展示的深度</span>
    </div>
	
	<div id="freak10" class="step noslide" data-x="4800" data-y="1000" data-rotate="-90" data-rotate-y="70">
        <span>涉及的广度</span>
		<img src="img/index/csstack.png" style="width:400px"/>
    </div>
	
	<div id="freak11" class="step noslide" data-x="-1500" data-y="1000" data-rotate="-90" data-rotate-y="70">
        <span>还有，即时的沟通</span><br/><br/>
		<img src="img/index/chat.jpg" style="width:800px"/>
    </div>
	
	<div id="ing" class="step noslide" data-x="0" data-y="2000" data-z="0">
		<p>通过在无限画布上<b class="positioning"> 定位 </b>&nbsp;<b class="rotating"> 旋转 </b>&nbsp;<b class="scaling"> 缩放 </b></p>
    </div>

    <div id="imagination" class="step" data-x="1500" data-y="2000" data-scale="2">
        <p>你唯一的 <b>限制</b><br/>只有你的 <b class="imagination">想象力</b></p>
    </div>
	
	<div id="freak12" class="step noslide" data-x="3000" data-y="2000" data-z="0">
        <p>基于 <a href="http://github.com/impress/impress.js">impress.js</a></p><br/>
		<img src="img/index/impress.png" style="width:800px"/>
    </div>
	
	<div id="freak13" class="step noslide" data-x="4500" data-y="2000" data-z="0">
        <p>项目托管</p>
		<img src="img/index/github.png" style="width:100px"/>
		<a href="https://github.com/l0g0ut/freak">GitHub</a><br/>
		<img src="img/index/gitee.svg" style="width:200px"/>
		<a href="https://gitee.com/l0g0ut/freak">Gitee</a><br/>
    </div>
	
	<div id="freak14" class="step noslide" data-x="0" data-y="3000" data-z="0">
        <span class="try">one more thing....</span>
    </div> 
	
	<div id="freak15" class="step noslide" data-x="1500" data-y="3000" data-z="0">
        <span class="try">have a good time !</span>
    </div>
	
	<div id="user" class="step noslide" data-x="6800" data-y="1000" data-z="0" data-scale="2">
		<form class="form-signin form-horizontal" action="/freak/login" method="post">
			<h2 class="form-signin-heading">用户登录</h2> 
			<div>
            <label for="username" class="sr-only control-label">用户名</label>
            <input type="text" name="username" class="form-control" placeholder="请输入账号" required>
			</div>
			<div>
            <label for="password" class="sr-only control-label">密码</label>
            <input type="password" name="password" class="form-control" placeholder="请输入密码" required>
			</div>
            <label class="checkbox"><input type="checkbox" value="remember-me">记住密码</label>
            <button class="btn btn-lg btn-success btn-block" type="submit">登录</button>
        </form>
    </div>
	
	<div id="plus" class="step noslide" data-x="6800" data-y="3000" data-z="0" data-scale="2" data-rotate-x="180">
        <form class="form-signin form-horizontal" action="/freak/register" method="post">
            <h2 class="form-signin-heading">用户注册</h2> 
			<div>
            <label for="username" class="sr-only control-label">请输入用户名</label>
            <input type="text" name="username" class="form-control" placeholder="请输入账号" required>
			</div>
			<div>
            <label for="password" class="sr-only control-label">请输入密码</label>
            <input type="password" name="password" class="form-control" placeholder="请输入密码" required>
			</div>
			<div>
			<label for="password" class="sr-only control-label">请确认密码</label>
            <input type="password" name="password" class="form-control" placeholder="请再次输入密码" required>
			</div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">注册</button>
        </form>
    </div>
	
	<div id="overview" class="step" data-x="2300" data-y="2300" data-scale="8"></div>
</div>

<div class="nav">
	<a href="#user" class="btn btn-success btn-large menus" onmousemove="bigImg1(this)" onmouseout="normalImg1(this)" ><i class="icon-user icon-white"></i></a><br/>
	<a href="#plus" class="btn btn-primary btn-large menus" onmousemove="bigImg2(this)" onmouseout="normalImg2(this)"><i class="icon-plus icon-white"></i></a><br/>
	<a href="/freak/home" class="btn btn-warning btn-large menus" onmousemove="bigImg3(this)" onmouseout="normalImg3(this)"><i class="icon-home icon-white"></i></a><br/>
	<a href="/freak/off" class="btn btn-danger btn-large menus" onmousemove="bigImg4(this)" onmouseout="normalImg4(this)"><i class="icon-off icon-white"></i></a>
</div>
	
<div class="hint"><p>Use a spacebar or arrow keys to navigate</p></div>

<script>
if ("ontouchstart" in document.documentElement) { 
    document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
}
</script>
<script src="js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>